<template>
  <div>
    <div class="container">
      <div class="nav" v-if="!($route.query.id)">
        <van-button type="primary" color="orange" @click="toList">+ 点击完善收货地址</van-button>
      </div>
      <div class="nav" v-else>
        <div class="user"><span>{{address.username}}</span><span>{{address.userphone}}</span></div>
        <div class="address"><i class="tag1">{{address.status==1?'默认':''}}</i><i class="tag2">{{address.label}}</i>{{address.location+address.useraddress}}</div>
      </div>
    </div>
    <goods-list :arr="arr"></goods-list>
    <van-button type="danger" @click="confirm">确认订单</van-button>
  </div>
</template>

<script>
import { getShopList, reqAddressList, reqOrderAdd } from "../../http/http";
export default {
  data() {
    return {
      arr: [],
      address: {},
    };
  },
  methods: {
    toList() {
      this.$router.push("/addressList");
    },
    confirm(){
      reqOrderAdd({
        ...JSON.parse(localStorage.getItem("order")),
        addressid:this.$route.query.id
      }).then((res)=>{
        if(res.data.code==200){
          this.$router.replace("/pay?orderId="+res.data.list.outTradeNo)
        }
      })
    }
  },
  activated() {
    //获取购物车id
    let idArr = JSON.parse(localStorage.getItem("order")).idstr.split(",");
    //获取购物车数据遍历
    this.arr = [];
    idArr.forEach((item) => {
      getShopList({
        uid: JSON.parse(localStorage.getItem("userInfo")).uid,
        id: item,
      }).then((res) => {
        if (res.data.code == 200) {
          this.arr.push(res.data.list[0]);
        }
      });
    });

    //查询某一条地址
    if (this.$route.query.id) {
      reqAddressList({
        uid: JSON.parse(localStorage.getItem("userInfo")).uid,
        id: this.$route.query.id,
      }).then((res) => {
        if (res.data.code == 200) {
          this.address = res.data.list[0];
        }
      });
    }
  },
};
</script>

<style scoped>
.container {
  background: linear-gradient(to bottom, #ff4400, #fc7f52);
  height: 1.5rem;
  padding: 0.3rem;
  margin-bottom: 0.2rem;
}
.nav {
  background: #fff;
  color: #333;
  padding: 0.2rem;
  text-align: center;
  line-height: 100%;
}
.btn1 {
  color: orange;
}
.user,
.address {
  text-align: left;
}
.user {
  font-weight: bold;
}
.user span {
  margin-right: 0.3rem;
}
.address {
  margin-top: 0.2rem;
  line-height: 0.4rem;
  color: #333;
}
.tag1{
  display: inline-block;
  border-radius: 0.15rem;
  border: 0.02rem solid red;
  color: red;
  margin-right: 0.1rem;
}
.tag2{
  display: inline-block;
  border-radius: 0.15rem;
  border: 0.02rem solid blue;
  color: blue;
  margin-right: 0.1rem;
}
</style>